<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改' "  :close-on-click-modal="false"
		:close-on-press-escape="false" :fullscreen="true">
		<el-form :model="dataForm" ref="dataFormRef" :rules="dataRule" 
			@keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
			<el-form-item prop="beanName" label="bean名称">
				<el-input v-model="dataForm.beanName" placeholder="spring bean名称, 如: testTask"></el-input>
			</el-form-item>
			<el-form-item prop="params" label="参数">
				<el-input v-model="dataForm.params" placeholder="参数"></el-input>
			</el-form-item>
			<el-form-item prop="cronExpression" label="cron表达式">
				<el-input v-model="dataForm.cronExpression" placeholder="如: 0 0 12 * * ?"></el-input>
			</el-form-item>
			<el-form-item prop="remark" label="备注">
				<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		ElMessage
	} from 'element-plus'

	import {
		getScheduleById,
		putSchedule,
		postSchedule
	} from "@/network/lswms/job/Schedule.js"
	export default {
		name: "ScheduleAddOrUpdate",
		emits: ["refreshDataList"],
		setup(props, {
			emit
		}) {

			const visible = ref(false);
			const dataForm = ref({
				id: '',
				beanName: '',
				params: '',
				cronExpression: '',
				remark: '',
				status: 0
			})

			const dataRule = reactive({
				beanName: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				cronExpression: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}]
			})

			const dataFormRef = ref(null);
			const init = () => {
				visible.value = true;
				nextTick(function() {
					dataFormRef.value.resetFields();
					if (dataForm.value.id) {
						getInfo();
					}
				});
			}

			//获取信息
			const getInfo = () => {
				getScheduleById(dataForm.value.id).then(function(res) {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					dataForm.value = res.data;
				}).catch(function() {});
			}

			// 表单提交
			const dataFormSubmitHandle = _.debounce(() => {
				dataFormRef.value.validate(function(valid) {
					if (!valid) {
						return false;
					}

					let qing = () => {
						return !dataForm.value.id ? postSchedule(dataForm.value) : putSchedule(dataForm
							.value)
					}
					qing().then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								visible.value = false
								emit('refreshDataList')
							}
						})
					}).catch(function() {});
				})
			}, 1000, {
				'leading': true,
				'trailing': false
			})

			return {
				visible,
				dataForm,
				dataRule,
				dataFormRef,
				init,
				getInfo,
				dataFormSubmitHandle
			}

		}
	}
</script>

<style>
</style>
